<template>
  <view>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
      <template #top>
        <view class="fit-lay">
          <view class="fit-view"  @click="openCityPicker">
            <view>{{ search.area.length>0 ? search.area : '地区' }}</view>
            <uni-icons style="margin-left: 10rpx" type="down" size="15"></uni-icons>
          </view>
          <view class="fit-view" @click="openTypePicker">
            <view >{{ search.industry.length>0 ? search.industry : '分类' }}</view>
            <uni-icons style="margin-left: 10rpx" type="down" size="15"></uni-icons>
          </view>
          <view class="fit-view" @click="timeTypePicker">
            <view >{{ search.createtimeValue ? search.createtimeValue : '时间' }}</view>
            <uni-icons style="margin-left: 10rpx" type="down" size="15"></uni-icons>
          </view>
        </view>
      </template>
      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <view v-for="(item, index) in dataList" :key="index" class="box-item">
        <view class="title-lay">
          <view class="address">{{item.area}}</view>
          <view class="time">{{ $wanlshop.timeFormat(item.createtime,'yyyy-mm-dd hh:MM:ss') }}</view>
        </view>
        <view class="content">
          <view>代理人: {{item.contacts}}</view>
          <view>联系方式:
            <text v-if="item.isinvitation === 1" class="link" @click="showActionSheet(item.contact_number)">{{item.contact_number}}</text>
            <text v-else class="link" @click="lookPhone(item, index)">点击查看</text>
          </view>
          <view>代理意向: {{item.title}}</view>
          <view>详细内容: {{item.content}}</view>
        </view>
      </view>
    </z-paging>

<!--    <view class="add" @tap="$wanlshop.auth('/pages/distributors/addDistributors')">发布</view>-->
    <lb-picker
        :list="cityData"
        :props="cityMap"
        :level="2"
        mode="multiSelector"
        @confirm="cityConfirm"
        ref="cityPicker">
    </lb-picker>
    <lb-picker
        :list="typeData"
        :props="typeMap"
        :level="3"
        mode="multiSelector"
        @confirm="typeConfirm"
        ref="typePicker">
    </lb-picker>
    <lb-picker
        :list="timeData"
        @confirm="timeConfirm"
        ref="timePicker">
    </lb-picker>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import LbPicker from '@/components/lb-picker'
export default {
  computed: {
    ...mapState(['user', 'statistics','common'])
  },
  components: {LbPicker},
  data() {
    return {
      cityData:[],
      typeData:[],
      timeData:[
          { label: '全部', value: 0 },
          { label: '今天', value: 1 },
          { label: '7天', value: 7 },
          { label: '15天', value: 15 },
          { label: '30天', value: 30 },
      ],
      typeMap:{
        label: 'name',
        value: 'id',
        children: 'childlist'
      },
      cityMap:{
        label: 'name',
        children: 'city'
      },
      search:{
        current_page: 1, //当前页码
        area:'',
        industry:'',
        createtime:'',
        createtimeValue:'',
      },
      dataList:[],
      status: 'loading',
      contentText: {
        contentdown: ' ',
        contentrefresh: '加载中',
        contentnomore: ''
      },
      userInfo:null
    };
  },
  mounted() {
    this.typeData = JSON.parse(JSON.stringify(this.$store.state.common.modulesData.categoryModules))
    this.typeData.forEach(item => {
      item.childlist.unshift({
        "id": item.id,
        "pid": item.id,
        "name": '全部',
        "image": item.image,
        "spacer": "&nbsp;├",
        "childlist": []
      });
    });
    this.typeData.unshift({
      "id": -1,
      "pid": 0,
      "name": "全部",
      "image": "",
      "spacer": "",
      "childlist": []
    })
    console.log(JSON.stringify(this.typeData))
    this.getCityData()
    this.getUserInfo()
  },
  methods: {
    getUserInfo(){
      this.$api.get({
        url: '/wanlshop/user/getuserinfo',
        success: res => {
         this.userInfo = res
        },
        fail: error => {
        }
      });
    },
    getCityData(){
      uni.request({
        url: 'https://www.xiushibang.com/uploads/city.json',
        success: (res) => {
          this.cityData = res.data
          this.cityData.unshift({ name: '全部'})
        }
      });
    },
    queryList(pageNo, pageSize){
      this.search.current_page = pageNo
      this.$api.get({
        url: '/wanlshop/invitation/lists',
        data: this.search,
        success: res => {
          this.$refs.paging.complete(res.data);
        },
        fail: () => {
          this.$refs.paging.complete(false);
        }
      });
    },

    openCityPicker(){
      this.$refs.cityPicker.show() // 显示
    },
    openTypePicker(){
      this.$refs.typePicker.show() // 显示
    },
    timeTypePicker(){
      this.$refs.timePicker.show() // 显示
    },
    timeConfirm(e){
      if (e.item.value === 0){
        this.search.createtime = ''
        this.search.createtimeValue = ''
      }else {
        this.search.createtime = e.item.value
        this.search.createtimeValue = e.item.label
      }
      this.$refs.paging.reload();
    },
    typeConfirm(e){
      var value = e.value
      var valueName = []
      for(var i=0;i<value.length;i++){
        valueName.push(e.item[i].name)
      }

      if(valueName.length === 1 && valueName[0] === '全部'){
        this.search.industry = ''
      }else if(valueName.length === 2 && valueName[1] === '全部'){
        this.search.industry = valueName[0]
      }else{
        this.search.industry = valueName.join('/')
      }
      this.$refs.paging.reload();
    },
    cityConfirm(e){
      var value = e.value
      var valueName = []
      for(var i=0;i<value.length;i++){
        if (!(i !== 0 && e.item[i].name === "全部")){
          valueName.push(e.item[i].name)
        }
      }
      console.log(valueName)
      if(valueName.length === 1 && valueName[0] === '全部'){
        this.search.area = ''
      }else{
        this.search.area = valueName.join('/')
      }
      this.$refs.paging.reload();
    },
    lookPhone(item,index){

      const _that = this

      this.$api.get({
        url: '/wanlshop/invitation/look',
        data: {
          invitation_id: item.id
        },
        success: res => {
          _that.dataList[index].isinvitation = 1
          _that.showActionSheet(item.contact_number)
        },
        fail: error => {
          if (_that?.userInfo.is_vip === 1){
            uni.showModal({
              title: '提示信息',
              content: '今日查看次数已用完',
              confirmText: '关闭',
              showCancel: false,
              success (res) {
              }
            });
          }else {
            uni.showModal({
              title: '提示信息',
              content: '今日查看次数已用完',
              cancelText: '关闭',
              confirmText: '开通VIP',
              success (res) {
                if (res.confirm) {
                  uni.navigateTo({url: '/pages/distributors/vip'})
                } else if (res.cancel) {
                  console.log('用户点击取消');
                }
              }
            });
          }
        }
      });
    },
    showActionSheet(phone){
      console.log(phone)
      const _that = this
      uni.showActionSheet({
        itemList: [ phone ],
        success: function (res) {
          _that.$wanlshop.phone(item.contact_number)
        },
        fail: function (res) {
          console.log(res.errMsg);
        }
      });
    }
  },
}
</script>

<style lang="scss">
  .box-item{
    background: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 22rpx;
    border-radius: 15rpx;
  }
  .box-item .title-lay{
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    align-items: center;
    border-bottom: 1rpx solid #eee;
  }
  .box-item .title-lay .address{
    color: black;
    font-size: 30rpx;
  }
  .box-item .title-lay .time{
    color: black;
    font-size: 30rpx;
  }
  .link{
    color: #ff9000;
    margin-left: 10rpx;
  }
  .box-item .content{
    color: #666;
    font-size: 30rpx;
    line-height: 2;
    padding: 20rpx;
  }
  .add{
    position: fixed;
    bottom: 50rpx;
    right: 50rpx;
    height: 120rpx;
    width: 120rpx;
    background: #ff9000;
    color: white;
    line-height: 120rpx;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .fit-lay{
    display: flex;
    align-items: center;
  }
  .fit-view{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 80rpx;
  }
  .sticky {
    position: -webkit-sticky; /* 兼容 Safari */
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
</style>
